<template>
    <div id="get-code">
        <div class="top-bg"></div>
        <div class="content">
            <div class="logo flex-center">
                <img src="./img/getcode.png" alt="">
                <span class="s-22">获取授权码</span>
            </div>
            <div class="flex-between">
                <div>
                    <div class="s-17 des">销售热线</div>
                    <div class="s-14 t-color-n" style="margin-bottom:4px">王老师：{{eduLevel==='primary'?' 177 5516 5650':'177 7533 9650'}}</div>
                    <div class="s-17 des" style="margin-top:25px">咨询客服</div>
                    <div class="s-14 t-color-n" style="margin-bottom:4px">公众号：美丽科学教学平台</div>
                    <div class="s-14 t-color-n">如需帮助，请扫码关注公众号，留言咨询在线客服。</div>
                    <div class="s-14 t-color-n" style="margin-top:25px">在线时间：法定工作日 9:00 -17:30</div>
                </div>
                <div class="code">
                    <img :src="codeImg" alt="">
                </div>
            </div>
        </div>
        <img class="close pointer" src="../../../assets/img/home/close.png" alt="" @click="switchAuth">
    </div>
</template>

<script>
export default {
    data() {
        return {
            eduLevel: window.eduLevel
        }
    },
    computed: {
        codeImg() {
            if (this.eduLevel === 'primary') {
                return require('../../../assets/img/home/wechatqr.png')
            } else {
                return require('../../../assets/img/home/wechatqr.png')
            }
        }
    },
    methods: {
        switchAuth() {
            this.$emit("getCode", "1");
            this.$emit('update:showGetCode', false)
        }
    }
}
</script>

<style lang="scss">
#get-code {
    width: 540px;
    height: 400px;
    background: rgba(255, 255, 255, 1);
    border-radius: 8px;
    position: relative;
    background: linear-gradient(
        rgba(227, 238, 255, 1) 0%,
        rgba(255, 255, 255, 1) 5%,
        rgba(255, 255, 255, 1) 100%
    );

    .close {
        position: absolute;
        top: 11px;
        right: 11px;
        height: 10px;
        width: 10px;
    }
    .top-bg {
        width: 540px;
        height: 180px;
        background-image: url(./img/author-bg.png);
        background-size: cover;
    }
    .content {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        padding: 0 35px;
        .logo {
            height: 110px;
            border-bottom: 1px solid #dddfe7;
            margin-bottom: 33px;
            img {
                width: 48px;
                height: 36px;
                margin-right: 10px;
            }
        }
        .des {
            margin-bottom: 19px;
        }
        .code {
            margin-top: 110px;
            img {
                width: 90px;
                height: 90px;
            }
        }
    }
}
</style>
